<script>
export default {
  name: "dwLine",
  props: {
    dash: {
      type: Boolean,
      default: false,
    },
    solid: {
      type: Boolean,
      default: false,
    },
    X: {
      type: Boolean,
      default: false,
    },
    Y: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "#bdc3c7",
    },
    // 如果是虚线的每段宽度
    "dash-width": {
      type: String | Number,
      default: "8",
    },
    size: {
      type: String | Number,
      default: "1",
    },
  },
  render(h) {
    const height = this.X ? `${this.size}px` : "100%";
    const width = this.Y ? `${this.size}px` : "100%";
    let background;
    if (this.dash) {
      background = `linear-gradient(to ${this.Y ? "top" : "right"}, ${this.color}, ${this.color} ${this.dashWidth / 2}px, transparent ${this.dashWidth / 2}px, transparent);background-size: ${this.Y ? `100% ${this.dashWidth}px` : `${this.dashWidth}px 100%`}`;
    } else if (this.solid) {
      background = `${this.color}`;
    }
    return h(
      "div",
      {
        style: `height:${height};width:${width};background:${background}`,
      }
      //   this.$slots.default
    );
  },
};
</script>
